<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>Vue 02：单页面开发基础 | Tyrival</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="本文粗略讲述了Vue单页面应用开发，包括组件：状态管理模块Vuex、路由管理模块VueRouter、AJAX模块VueResource等，新建一个页面并实现跳转。">
<meta name="keywords" content="javascript,vue">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue 02：单页面开发基础">
<meta property="og:url" content="http://tyrival.github.io/posts/vue-02-base/index.html">
<meta property="og:site_name" content="Tyrival">
<meta property="og:description" content="本文粗略讲述了Vue单页面应用开发，包括组件：状态管理模块Vuex、路由管理模块VueRouter、AJAX模块VueResource等，新建一个页面并实现跳转。">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2017-06-19T10:00:03.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue 02：单页面开发基础">
<meta name="twitter:description" content="本文粗略讲述了Vue单页面应用开发，包括组件：状态管理模块Vuex、路由管理模块VueRouter、AJAX模块VueResource等，新建一个页面并实现跳转。">
    

    

    
        <link rel="icon" href="/css/images/logo.png" />
    

    <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/libs/open-sans/styles.css">
    <link rel="stylesheet" href="/libs/source-code-pro/styles.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="/libs/jquery/2.1.3/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/libs/lightgallery/css/lightgallery.min.css">
    
    
        <link rel="stylesheet" href="/libs/justified-gallery/justifiedGallery.min.css">
    
    
    
    


</head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/" id="logo">
                <i class="logo"></i>
                <span class="site-title">Tyrival</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="http://www.tyrival.com">主页</a>
                
                    <a class="main-nav-link" href="/categories">分类</a>
                
                    <a class="main-nav-link" href="/tags">标签</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/css/images/avatar.png" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="http://www.tyrival.com">主页</a></td>
                
                    <td><a class="main-nav-link" href="/categories">分类</a></td>
                
                    <td><a class="main-nav-link" href="/tags">标签</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/css/images/avatar.png" />
            <h2 id="name">周晨煜</h2>
            <h3 id="title">程序员 &amp; 自学狂</h3>
            <span id="location"><i class="fa fa-map-marker"></i>无锡, 中国</span>
            <a id="follow" target="_blank" href="https://github.com/tyrival">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                45
                <span>文章</span>
            </div>
            <div class="article-info-block">
                19
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/tyrival" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="https://twitter.com/Tyrival" target="_blank" title="twitter" class=tooltip>
                            <i class="fa fa-twitter"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-vue-02-base" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            Vue 02：单页面开发基础
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/posts/vue-02-base/">
            <time datetime="2017-06-19T07:33:56.000Z" itemprop="datePublished">2017-06-19</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/categories/前端/">前端</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/javascript/">javascript</a>, <a class="tag-link" href="/tags/vue/">vue</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>本文粗略讲述了Vue单页面应用开发，包括组件：状态管理模块Vuex、路由管理模块VueRouter、AJAX模块VueResource等，新建一个页面并实现跳转。</p>
<a id="more"></a>
<h3 id="VueResource"><a href="#VueResource" class="headerlink" title="VueResource"></a>VueResource</h3><p>工程中默认使用的ajax模块是axios，需要额外下载VueResource</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install vue-resource</span><br></pre></td></tr></table></figure>
<h3 id="VueRouter"><a href="#VueRouter" class="headerlink" title="VueRouter"></a>VueRouter</h3><p>VueRouter用于管理单页面应用的页面跳转，可以实现局部页面的切换，路由配置文件为/src/router.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置的解析方式为：查找到路径后就停止向后解析</span></span><br><span class="line"><span class="keyword">const</span> routers = [&#123;</span><br><span class="line">    path: <span class="string">'/'</span>,</span><br><span class="line">    meta: &#123;</span><br><span class="line">        title: <span class="string">''</span></span><br><span class="line">    &#125;,</span><br><span class="line">    component: <span class="function">(<span class="params">resolve</span>) =&gt;</span> <span class="built_in">require</span>([<span class="string">'./views/index.vue'</span>], resolve)</span><br><span class="line">&#125;,</span><br><span class="line">    &#123;<span class="attr">path</span>: <span class="string">'/index'</span>, <span class="attr">component</span>: <span class="built_in">require</span>(<span class="string">'./views/index.vue'</span>)&#125;,		<span class="comment">// 与/一致，方便跳转到首页</span></span><br><span class="line">    &#123;<span class="attr">path</span>: <span class="string">'/hello'</span>, <span class="attr">component</span>: <span class="built_in">require</span>(<span class="string">'./views/main/hello.vue'</span>)&#125;, <span class="comment">// 跳转到hello页面</span></span><br><span class="line">    &#123;<span class="attr">path</span>: <span class="string">'*'</span>, <span class="attr">component</span>: <span class="built_in">require</span>(<span class="string">'./views/index.vue'</span>)&#125;,			<span class="comment">// 找不到路径时，默认跳转到首页</span></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> routers</span><br></pre></td></tr></table></figure>
<h3 id="Main-js"><a href="#Main-js" class="headerlink" title="Main.js"></a>Main.js</h3><p>/src/main.js为项目总配置文件，在其中引入各模块，并实例化前端应用根节点，内容如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 全局引入模块文件和样式</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>  <span class="comment">// 引入Vue</span></span><br><span class="line"><span class="keyword">import</span> iView <span class="keyword">from</span> <span class="string">'iview'</span>  <span class="comment">// 引入iView</span></span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">'vue-router'</span>  <span class="comment">// 引入VueRouter</span></span><br><span class="line"><span class="keyword">import</span> Routers <span class="keyword">from</span> <span class="string">'./router'</span>  <span class="comment">// 引入VueRouter配置文件</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span>  <span class="comment">// 引入Vuex</span></span><br><span class="line"><span class="keyword">import</span> VueResource <span class="keyword">from</span> <span class="string">'vue-resource'</span>  <span class="comment">// 引入VueResource(新增)</span></span><br><span class="line"><span class="keyword">import</span> Util <span class="keyword">from</span> <span class="string">'./libs/util'</span>  <span class="comment">// 引入util包</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./app.vue'</span>  <span class="comment">// 引入项目入口模板</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'iview/dist/styles/iview.css'</span>  <span class="comment">// 引入iView样式</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue引用模块</span></span><br><span class="line">Vue.use(VueRouter)  <span class="comment">// 路由模块</span></span><br><span class="line">Vue.use(Vuex)  <span class="comment">// 状态管理</span></span><br><span class="line">Vue.use(VueResource)  <span class="comment">// Ajax模块(新增)</span></span><br><span class="line">Vue.use(iView)  <span class="comment">// iView组件</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// VueRouter路由模块配置和实例化</span></span><br><span class="line"><span class="keyword">const</span> RouterConfig = &#123;</span><br><span class="line">    mode: <span class="string">'history'</span>,</span><br><span class="line">    routes: Routers</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(RouterConfig)</span><br><span class="line"></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">    iView.LoadingBar.start()</span><br><span class="line">    Util.title(to.meta.title)</span><br><span class="line">    next()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.afterEach(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    iView.LoadingBar.finish()</span><br><span class="line">    <span class="built_in">window</span>.scrollTo(<span class="number">0</span>, <span class="number">0</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// Vuex状态管理实例化</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state: &#123;&#125;,</span><br><span class="line">    getters: &#123;&#125;,</span><br><span class="line">    mutations: &#123;&#125;,</span><br><span class="line">    actions: &#123;&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 实例化前端根节点，声明变量vm，作为全局应用，方便后续调用</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,  <span class="comment">//入口元素</span></span><br><span class="line">    router: router,  <span class="comment">// 路由</span></span><br><span class="line">    store: store,  <span class="comment">// 状态</span></span><br><span class="line">    render: <span class="function"><span class="params">h</span> =&gt;</span> h(App)  <span class="comment">// 渲染</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="Hello-World"><a href="#Hello-World" class="headerlink" title="Hello World"></a>Hello World</h3><ul>
<li>新建页面/src/views/main/hello.vue</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"hello"</span>&gt;</span></span><br><span class="line">        Hello World!</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">        name: <span class="string">'hello'</span>,  <span class="comment">// name属性用于Vue框架报错时，显示错误模块名</span></span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>新建样式文件/src/styles/main.less和/src/styles/variables.less，前者用于全局样式，后者用于定义全局less变量</li>
</ul>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// variables.less</span></span><br><span class="line"><span class="variable">@global-color:</span> <span class="number">#ffffff</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// main.less</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">'../styles/variables.less'</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">html</span>, <span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">@global-color</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>修改index.vue</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span> <span class="attr">scoped</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">    @import '../styles/main.less';</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      	<span class="comment">&lt;!-- 绑定goHello方法 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"goHello"</span>&gt;</span>Go to Hello<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="undefined">        methods: &#123;</span></span><br><span class="line"><span class="javascript">          	<span class="comment">// 绑定按钮的点击事件</span></span></span><br><span class="line"><span class="javascript">            goHello: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="comment">// 跳转到/hello，在/src/router.js中指向/views/main/hello.vue</span></span></span><br><span class="line"><span class="javascript">                <span class="keyword">this</span>.$router.push(&#123;</span></span><br><span class="line"><span class="javascript">                    path: <span class="string">'/hello'</span></span></span><br><span class="line"><span class="undefined">                &#125;)，</span></span><br><span class="line"><span class="undefined">                </span></span><br><span class="line"><span class="javascript">                <span class="keyword">this</span>.$http.get(<span class="string">'/dist/data/ajax.json'</span>).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="comment">// 响应成功回调</span></span></span><br><span class="line"><span class="javascript">                    <span class="built_in">console</span>.log(<span class="string">"Success message: "</span> + response.body.message)</span></span><br><span class="line"><span class="undefined">                &#125;, (response) =&gt; &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="comment">// 响应错误回调</span></span></span><br><span class="line"><span class="javascript">                    <span class="built_in">console</span>.log(<span class="string">"Failure message: "</span> + response.body.message)</span></span><br><span class="line"><span class="undefined">                &#125;);</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="VueResource-1"><a href="#VueResource-1" class="headerlink" title="VueResource"></a>VueResource</h3><ul>
<li>VueResource负责与后端进行Ajax请求交互，基本用法如下</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    methods: &#123;</span><br><span class="line">       ajaxReq: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">         	</span><br><span class="line">         	<span class="comment">// 基本结构为this.$http.get(url).then(success, failure)</span></span><br><span class="line">         	<span class="comment">// success和failure使用Lambda表达式，好处是不会改变函数内部的上下文</span></span><br><span class="line">         	<span class="keyword">var</span> me = <span class="keyword">this</span>;</span><br><span class="line">       		<span class="keyword">this</span>.$http.get(<span class="string">'/dist/data/ajax.json'</span>).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">              </span><br><span class="line">              	<span class="comment">// 由于使用Lambda表达式，上下文未变化</span></span><br><span class="line">              	<span class="built_in">console</span>.log(<span class="keyword">this</span> === me)</span><br><span class="line">                </span><br><span class="line">       			<span class="comment">// 响应成功回调</span></span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">"Success message: "</span> + response.body.message)</span><br><span class="line">                </span><br><span class="line">            &#125;, (response) =&gt; &#123;</span><br><span class="line">              </span><br><span class="line">                <span class="comment">// 响应错误回调</span></span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">"Failure message: "</span> + response.body.message)</span><br><span class="line">                </span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>调用方法有两种</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Vue.$http.get()  <span class="comment">// 全局</span></span><br><span class="line"><span class="keyword">this</span>.$http.get()  <span class="comment">// 局部</span></span><br></pre></td></tr></table></figure>
<ul>
<li>除了get，还有下列REST方法</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">get(url, [options])</span><br><span class="line">head(url, [options])</span><br><span class="line">delete(url, [options])</span><br><span class="line">jsonp(url, [options])</span><br><span class="line">post(url, [body], [options])</span><br><span class="line">put(url, [body], [options])</span><br><span class="line">patch(url, [body], [options])</span><br></pre></td></tr></table></figure>
<ul>
<li>options包含以下属性</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">url				string				请求的URL</span><br><span class="line">method			string				请求的HTTP方法，例如：&apos;GET&apos;, &apos;POST&apos;或其他HTTP方法</span><br><span class="line">body			Object,FormData string		request body</span><br><span class="line">params			Object				请求的URL参数对象</span><br><span class="line">headers			Object				request header</span><br><span class="line">timeout			number				单位为毫秒的请求超时时间 (0 表示无超时时间)</span><br><span class="line">before			function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数</span><br><span class="line">progress		function(event)		ProgressEvent回调处理函数</span><br><span class="line">credentials		boolean				表示跨域请求时是否需要使用凭证</span><br><span class="line">emulateHTTP		boolean				发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override</span><br><span class="line">emulateJSON		boolean				将request body以application/x-www-form-urlencoded content type发送</span><br></pre></td></tr></table></figure>
<ul>
<li>response包含以下属性和方法</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">方法			类型			描述</span><br><span class="line">text()	 	string	   	以string形式返回response body</span><br><span class="line">json()	 	Object	   	以JSON对象形式返回response body</span><br><span class="line">blob()	 	Blob	   	以二进制形式返回response body</span><br><span class="line">属性			类型			描述</span><br><span class="line">ok		 	boolean   	响应的HTTP状态码在200~299之间时，该属性为true</span><br><span class="line">status	 	number	   	响应的HTTP状态码</span><br><span class="line">statusText	string		响应的状态文本</span><br><span class="line">headers		Object		响应头</span><br></pre></td></tr></table></figure>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="http://tyrival.github.io/posts/vue-02-base/" data-id="cjs9z0xq6003u5aa7cwsf5ezh" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/posts/less-and-webstorm/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    Less入门 &amp; Webstorm实时编译
                
            </div>
        </a>
    
    
        <a href="/posts/vue-01-initial/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">Vue 01：初始化项目</div>
        </a>
    
</nav>


    
</article>


    
    
        <section id="comments">
	<div id="commentContainer"></div>
</section>
    

</section>
            
                
<aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="no-thumbnail">
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/系统/">系统</a></p>
                            <p class="item-title"><a href="/posts/redis-cluster-by-docker/" class="title">Docker 部署 Redis5.0 集群，以及 ioredis 连接集群</a></p>
                            <p class="item-date"><time datetime="2019-02-18T05:20:49.552Z" itemprop="datePublished">2019-02-18</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/hadoop/">hadoop</a></p>
                            <p class="item-title"><a href="/posts/hadoop-docker-01/" class="title">Docker+Hadoop 01：环境部署</a></p>
                            <p class="item-date"><time datetime="2019-01-02T23:58:03.975Z" itemprop="datePublished">2019-01-03</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/后端/">后端</a></p>
                            <p class="item-title"><a href="/posts/springboot-tesseract/" class="title">SpringBoot05：Spring Boot与Tesseract集成</a></p>
                            <p class="item-date"><time datetime="2018-07-08T06:26:12.000Z" itemprop="datePublished">2018-07-08</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/后端/">后端</a></p>
                            <p class="item-title"><a href="/posts/springboot-elastic/" class="title">SpringBoot04：基于Docker和Spring Boot部署开发Elastic</a></p>
                            <p class="item-date"><time datetime="2018-07-08T06:25:55.000Z" itemprop="datePublished">2018-07-08</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/后端/">后端</a></p>
                            <p class="item-title"><a href="/posts/springboot-solr/" class="title">SpringBoot03：基于Docker和Spring Boot部署开发Solr</a></p>
                            <p class="item-date"><time datetime="2018-07-08T06:25:50.000Z" itemprop="datePublished">2018-07-08</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/hadoop/">hadoop</a><span class="category-list-count">9</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/iOS/">iOS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">14</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/后端/">后端</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/工具/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/服务器/">服务器</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/硬件/">硬件</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/算法/">算法</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/系统/">系统</a><span class="category-list-count">4</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/algorithm/">algorithm</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/cloud/">cloud</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css/">css</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/database/">database</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/">docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/f-k-ie/">f**k ie</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hadoop/">hadoop</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">12</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/less/">less</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/linux/">linux</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mac/">mac</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/python/">python</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/raspberry/">raspberry</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/server/">server</a><span class="tag-list-count">12</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/swift/">swift</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/tomcat/">tomcat</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/">vue</a><span class="tag-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/tags/algorithm/" style="font-size: 14px;">algorithm</a> <a href="/tags/cloud/" style="font-size: 10px;">cloud</a> <a href="/tags/css/" style="font-size: 12px;">css</a> <a href="/tags/database/" style="font-size: 14px;">database</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/f-k-ie/" style="font-size: 14px;">f**k ie</a> <a href="/tags/git/" style="font-size: 12px;">git</a> <a href="/tags/hadoop/" style="font-size: 18px;">hadoop</a> <a href="/tags/java/" style="font-size: 16px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/less/" style="font-size: 10px;">less</a> <a href="/tags/linux/" style="font-size: 14px;">linux</a> <a href="/tags/mac/" style="font-size: 10px;">mac</a> <a href="/tags/python/" style="font-size: 10px;">python</a> <a href="/tags/raspberry/" style="font-size: 12px;">raspberry</a> <a href="/tags/server/" style="font-size: 20px;">server</a> <a href="/tags/swift/" style="font-size: 10px;">swift</a> <a href="/tags/tomcat/" style="font-size: 10px;">tomcat</a> <a href="/tags/vue/" style="font-size: 12px;">vue</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>

            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2019 Tyrival<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>
        </div>
    </div>
</footer>
        


    
        <script src="/libs/lightgallery/js/lightgallery.min.js"></script>
        <script src="/libs/lightgallery/js/lg-thumbnail.min.js"></script>
        <script src="/libs/lightgallery/js/lg-pager.min.js"></script>
        <script src="/libs/lightgallery/js/lg-autoplay.min.js"></script>
        <script src="/libs/lightgallery/js/lg-fullscreen.min.js"></script>
        <script src="/libs/lightgallery/js/lg-zoom.min.js"></script>
        <script src="/libs/lightgallery/js/lg-hash.min.js"></script>
        <script src="/libs/lightgallery/js/lg-share.min.js"></script>
        <script src="/libs/lightgallery/js/lg-video.min.js"></script>
    
    
        <script src="/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
    
    
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });
        </script>
        <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    



<!-- Custom Scripts -->
<script src="/js/main.js"></script>

    </div>
</body>
</html>